<!--
 * @Descripttion: 发布动态
 * @version: 
 * @Author: lyw
 * @Date: 2022-02-12 23:52:19
 * @LastEditors: fengweicong 75202172+fengweicong@users.noreply.github.com
 * @LastEditTime: 2022-07-15 15:56:01
-->
<template>
  <div class="sendMessage">
    <el-card>
      <div slot="header">
        <span class="title">今日动态</span>
        <el-button class="bt" type="text" @click="publish">发布</el-button>
      </div>
      <div class="basicMessage">
        <el-input
          placeholder="说点点什么吧..."
          type="textarea"
          :rows="4"
          v-model="verbal_content"
          ></el-input
        >
        <div class="recent-images">
          <div class="add">
            <div class="images" v-if="imgList.length > 0">
              <div class="img" v-for="obj,id in imgList" :key="id">
                <img v-lazy="obj.photo_url">
                <div class="shade">
                  <i class="el-icon-delete" @click="deleteImage(id)"></i>
                </div>
              </div>
            </div>
            <el-upload
                class="avatar-uploader"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :http-request="httpRequestFn"
                :disabled="imgList.length > 3"
                :limit="1">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <!-- <div class="tips">
              <div class="text">图片数量1~4张，支持的图片格式：.jpg</div>
            </div> -->
          </div>
        </div>
      </div>
    </el-card>
    
    <!-- 动态列表 -->
    <el-card class="list">
      <div slot="header">
        <span class="title">动态</span>
        <el-button class="bt" type="text" >待定</el-button>
      </div>
      <el-card class="one-recent" v-for="item,id in recentList" :key="id">
        <div class="content">
          <span class="text">{{item.verbal_content}}</span>
          <div class="images">
            <img v-lazy="item2.photo_url" v-for="item2,i in item.photo_url_list" :key="i">
          </div>
        </div>
        <div>
          <span class="tips">{{item.post_time}}</span>
          <el-button class="bt" type="text" @click="withdraw(item.id, id)">撤回</el-button>
        </div>
      </el-card>
    </el-card>
  </div>
</template>

<script>
import { upLoadPicture } from '@/utils/utils'
export default {
  data() {
    return {
      verbal_content: "",
      imgList: [],

      recentList:[],
    };
  },
  methods: {
    withdraw(id, index) {
      this.$confirm('是否确定撤回这条动态?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        return this.$API.deleteSupplierRecent(id)
      }).then(res => {
        if (res.status == 200) {
          this.$message.success('成功撤回一条动态')
          this.recentList.splice(index, 1)
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },  
    // 删除图片
    deleteImage(id) {
      this.imgList.splice(id, 1)
    },
    httpRequestFn(res) {
      upLoadPicture(res, url => {
        this.imgList.push({
          "photo_url": url
        })
       })
    },
    // 发布动态
    publish() {
      this.$API.addSupplierRecent({
        "supplier_id": this.$store.state.saler.saler_id,
        "verbal_content": this.verbal_content,
        "post_time": new Date()
      }).then(res => {
        if (res.status == 201) {
          let recent_id = res.data.id
          let taskList = []
          if (this.imgList.length > 0) {
            for (let obj of this.imgList) {
              obj["supplier_recent_id"] = recent_id
              taskList.push(this.$API.addSupplierRecentPhotos(obj))
            }
            return Promise.all(taskList)
          }
          return res
        }
      }).then(res => {
        if (res.constructor == Array) {
          let result = true
          res.forEach(item => result = result & item.status == 201)
          if (result) this.$message.success('发布成功')
          else this.$message.error('图片上传失败')
        } else if (res.status == 201) {
          this.$message.success('发布成功')
        }
      })
    },
    async load() {
      this.recentList = []
      await this.$API.getSupplierRecent().then(res => {
        if (res.status == 200) {
          res.data.reverse()
          let supplier_id = this.$store.state.saler.saler_id
          for (let obj of res.data) { // 找到这个商家的动态
            if (obj.supplier_id == supplier_id) this.recentList.push(obj)
          }
          return this.$API.getSupplierRecentPhotos()
        }
      }).then(res => {
        if (res.status == 200) {
          for (let obj of this.recentList) { // 找到动态对应的图片
            let photo_url_list = []
            for (let obj1 of res.data) {
              if (obj.id == obj1.supplier_recent_id) {
                photo_url_list.push(obj1)
              }
            }
            obj['photo_url_list'] = photo_url_list
          }
          this.$forceUpdate()
        }
      })
    }
  },
  created() {
    this.load()
  }
}
</script>

<style lang="less" scoped>
.title{
  color: @color-theme;
}
.bt{
  float: right; 
  padding: 0;
  margin-left: 20px;
}
.tips{
  color: @color-tips;
}
.basicMessage{
  .recent-images{
    margin-top: 20px;
    .add{
      display: flex;
      user-select: none;
      .tips{
        display: flex;
        flex-direction: column-reverse;
        padding-left: 20px;
      }
      .avatar-uploader {
        width: 100px;
        height: 100px;
        /deep/ .el-upload {
          border: 1px dashed #d9d9d9;
          border-radius: 6px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
        }
        .el-upload:hover {
          border-color: #409eff;
        }
        .avatar-uploader-icon {
          font-size: 28px;
          color: #3264a9;
          width: 100px;
          height: 100px;
          line-height: 100px;
          text-align: center;
        }
      }
      margin-bottom: 20px;
    }
    .images{
      height: 100px;
      display: flex;
      
      .img{
        position: relative;
        margin-right: 20px;
        img{
          height: 100px;
        }
        &:hover .shade{
          display: flex;
        }
        .shade{
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          background: rgba(0,0,0,0.5);
          z-index: 2;
          i{
            font-size: 30px;
            color: #E6A23c;
          }
          display: none;
        }
      }
    }
  }
}
.list{
  margin-top: 20px;
  .one-recent{
    margin-bottom: 20px;
    .text{
        line-height: 1.5rem;
    }
    .images{
      margin-top: 10px;
      img{
        height: 100px;
      }
    }
  }
}
</style>
